<template>
    <div class="page_header">
        <div class="left" style="text-align: center;">
            <iconSvg
            v-if="isBack"
            class="backIcon"
            name="back"
            w="22px"
            h="22px"
            @click.native="back"
            ></iconSvg>
            <img class="logoIcon" src="../../styles/logo.svg" v-else alt="" @click.native="back">
            <span></span>
            <span class="pageTitle" style="padding: 0;">扫码登录</span>
        </div>
    </div>
</template>

<script>
import bus from '@/utils/eventBus'
import host from '../../config/host';

export default {
    name: 'loginHeader',
    props: {
        isBack: {
            type: Boolean,
            default: false
        },
        is_Level_three_page: {
            type: Boolean,
            default: false
        },
        maxLevelThreePage: {
            type: Boolean,
            default: false
        },
        ewm: {
            type: Boolean,
            default: false
        },
        filter: {
            type: Boolean,
            default: false
        },
        LevelTwoPageUrl: {
            type: String,
            default: ''
        },
        hadInput: {
            type: Boolean,
            default: false
        },
        backText: {
            type: String,
            default: ''
        },
        centerTitleText: {
            type: String,
            default: ''
        }
    },
    data () {
        return {
        }
    },
    computed: {
        title() {
            return this.$route.meta.title
        },
        style() {
            return {
                'justify-content': this.ewm ? 'space-between' : 'center'
            }
        }
    },
    mounted() {

    },
    methods: {
        goFilter() {
            this.$emit('filterFn')
        },
        saoMa() {
            this.$emit('saoMa')
        },
        back() {
            window.location.href = host.wxSsoUrl
        },
        goLevelTwoPage() {
            if (!this.hadInput) {
                if (this.maxLevelThreePage) {
                    this.$router.push('/operaionManage')
                } else {
                    this.$emit('backFn')
                }
            } else {
                bus.$emit('showConfirm')
            }
        },
    },
}
</script>

<style lang="less">
    .page_header{
        display: flex;
        height: 45px;
        line-height: 45px;
        background: #22233F;
        border-bottom: 1px solid rgba(255,255,255,0.1);
        align-items: center;
        .left{
            text-align: left;
            flex: 1;
            position: relative;
            .logoIcon{
                width: 1.066667rem;
                height: 1.066667rem;
                margin-left: 7px;
                position: absolute;
                left: 0;
                top: 50%;
                transform: translate(0, -50%);
            }
            .backIcon{
               position: absolute;
                left: 10px;
                top: 50%;
                transform: translate(0, -50%);
            }
            .pageTitle,.backTitle{
                font-size: 17px;
                color: #fff;
                display: inline-block;
                vertical-align: middle;
            }
            .pageTitle{
              padding-left: 0;
            }
        }
        .filter_ewm{
            width: 60px;
            display: flex;
        }
        .center_title{
            flex: 1;
            font-size: 17px;
            color: #fff;
        }
        .right{
            text-align: right;
            flex: 1;
            .right_content{
                display: inline-block;
                padding: 0 16px 0 12px;
                line-height: 45px;
                position: relative;
                &::before{
                    content: '';
                    width: 1px;
                    height: 30%;
                    background: rgba(255,255,255,0.4);
                    position: absolute;
                    top: 50%;
                    left: 0;
                    transform: translate(0, -50%);
                }
                .right_icon{
                    margin-top: -2px;
                    &:not(:last-child){
                        margin-right: 5px;
                    }
                }
            }
            .noLeftBorder{
                &::before{
                    content: unset
                }
            }
        }
    }
</style>
